<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes move {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(1000px, 0);
        }
      }
      div {
        width: 100px;
        height: 100px;
        background-color: pink;
        /* animation-name: move; */
        /* animation-duration: 2s; */
        /* 运动曲线 */
        /* animation-timing-function: ease; */
        /* 开始时间 */
        /* animation-delay: 1s; */
        /* 动画播放 (默认为1) infinite: 无限次 */
        /* animation-iteration-count: infinite; */
        /* 结束时是否反方向播放(默认 normal) */
        /* animation-direction: alternate; */
        /* 动画结束后保持结束状态(默认不返回: backwards) */
        /* animation-fill-mode: forwards; */
        animation: move 2s ease 0s 1 alternate forwards;
      }
      div:hover {
        /* 鼠标结果div停止动画 */
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
